<script setup lang="ts">
import { LINK_PROFILE_PUSH } from '../../../router/routes/business/user';
import { useUserStore } from '../../../store/modules/user';
import AuthSrc from '../assets/auth.png';

interface Props {
  title: string;
}

const {
  title
} = defineProps<Props>();

const userStore = useUserStore();

const { go } = useRouterHelper();
</script>

<template>
  <div class="flex justify-between w-900px bg-white h-55px rounded-tl-8px rounded-tr-8px" style="margin:20px 0 0 0; border-bottom: 1px solid #F3F3F3; opacity: 1;">
    <div v-if="title === '认证'">
      <div class="title flex align-center">
        <span class="mr-5px">{{ title }}</span>
        <img v-if="userStore.getUserInfo?.certifiedStatus === 2" src="../assets/auth.png"
          class="ml-5px w-54px h-18px" />
        <span v-else-if="userStore.getUserInfo?.certifiedStatus === 3"
          class="text-red-500">审核失败</span>
        <span v-else-if="userStore.getUserInfo?.certifiedStatus === 1"
          :class="['text-[#1382EF]']">审核中</span>
        <span class="font-normal text-[#8B8C8C]" v-else>未审核</span>
      </div>
    </div>
    <div class="title" v-else>
      {{ title }}
    </div>
    <div v-if="title === '消息'" class="flex align-center pr-23px cursor-pointer text-[#666] hover:text-[#1382EF]" @click="go(LINK_PROFILE_PUSH)">
      <img src="../assets/push.png" class="w-15px h-15px">
      <span class="text-14px ml-10px hover:text-#02C680">推送设置</span>
    </div>
  </div>

</template>

<style scoped lang="scss">
.title {
  height: 22px;
  line-height: 24px;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  background-color: white;
  padding:0px 0 0 20px ;
  -webkit-background-clip: text;
}
</style>
